<template>
  <div class="nav">
<!--    <el-button @click="test">test</el-button>-->
    <div>
      <span class="tag">数据概况</span>
      <div class="box">
        <div class="box_item">
          <span class="name">数据总量</span>
          <span class="date">4</span>
        </div>
        <div class="box_item">
          <span class="name">今日新增数据</span>
          <span class="date">2</span>
        </div>
        <div class="box_item">
          <span class="name">平均答题时长</span>
          <span class="date">1分30秒</span>
        </div>
        <div class="box_item">
          <span class="name">总浏览量</span>
          <span class="date">10</span>
        </div>
        <div class="box_item" style="border-right: none">
          <span class="name">总完成率</span>
          <span class="date">80%</span>
        </div>
      </div>
    </div>
    <div>
      <span class="tag">成绩概况</span>
      <div class="box">
        <div class="box_item">
          <span class="name">平均分</span>
          <span class="date">{{this.areScore}}</span>
        </div>
        <div class="box_item">
          <span class="name">最高分</span>
          <span class="date">{{maxScore}}</span>
        </div>
        <div class="box_item">
          <span class="name">最低分</span>
          <span class="date">{{minScore}}</span>
        </div>
        <div class="box_item">
          <span class="name">待人工评分</span>
          <span class="date">{{peoNum}}</span>
        </div>
        <div class="box_item" style="border-right: none">
          <span class="name">涉嫌作弊人数</span>
          <span class="date">0</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="成绩分布" name="first">
        <div id="main" style="width: 600px;height:400px;"></div>
        <el-table :data="scoreData" style="width: 98%" :header-cell-style="{background:'#eef1f6'}">
          <el-table-column property="num" label="序号" align="center" width="100"></el-table-column>
          <el-table-column property="score" label="分数" align="center" width="420"></el-table-column>
          <el-table-column property="people" label="人数" align="center" width="420"></el-table-column>
          <el-table-column property="bai" label="百分比" align="center" width="420"></el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="题目正确率" name="second">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#eef1f6'}">
          <el-table-column prop="num" label="序号" align="center" width="100">
          </el-table-column>
          <el-table-column prop="questionTitle" label="题目标题" width="1035">
          </el-table-column>
          <el-table-column prop="correct" label="正确率" align="center" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button @click="headerClick(scope.row,scope.$index)" type="text" size="small">查看详情</el-button>

              <el-dialog title="题目正确率" :visible.sync="dialogTableVisible" :append-to-body="true" class="dialog">
                <div>
                  <span>{{num}}.</span>
                  <span>{{title}}</span>
                </div>
                <div style="margin:20px 10px 10px;font-size: 12px">
                  <span style="margin-right: 20px">回答人数：4</span>
                  <span>正确率：{{correct}}</span>
                </div>
<!--                <el-table :data="gridData[num-1].resData" :header-cell-style="{background:'#eef1f6'}">-->
<!--                  <el-table-column property="name" label="选项" width="620"></el-table-column>-->
<!--                  <el-table-column property="value" label="回复占比" align="center" width="100"></el-table-column>-->
<!--                </el-table>-->
<!--                <div class="btns">-->
<!--                  &lt;!&ndash;                  <el-button-group>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <el-button plain size="medium" icon="el-icon-arrow-left">上一题</el-button>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    <el-button plain size="medium">下一题<i class="el-icon-arrow-right el-icon&#45;&#45;right"></i></el-button>&ndash;&gt;-->
<!--                  &lt;!&ndash;                  </el-button-group>&ndash;&gt;-->
<!--                </div>-->
              </el-dialog>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="考试排名" name="third">
        <el-table :data="rankData" style="width: 100%" :header-cell-style="{background:'#eef1f6'}">
          <el-table-column prop="num" label="名次" align="center" width="200">
          </el-table-column>
          <el-table-column prop="score" label="得分" align="center" width="939">
          </el-table-column>
          <el-table-column prop="longtime" label="答题时长" align="center" width="250">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "DateGene",
  props: ["msg"],
  data(){
    return{
      activeName: 'first',
      dialogTableVisible: false,
      reportDate: '',
      num: 0,
      title: '',
      correct: '',

      peoNum: 0,
      maxScore: 0,
      minScore: 0,
      areScore: 0,
      //图
      // source: [
      //   ['product', '人数'],
      //   ['[0,20)',3],
      //   ['[20,40)',1],
      //   ['[40,60)',0],
      //   ['[60,80)',0],
      //   ['[80,100)',0]
      // ],
      // source: [],

      // //成绩分布
      // scoreData: [{
      //   num: 1,
      //   score: '[0,20)',
      //   people: 3,
      //   bai: '20%'
      // }],
      scoreData: [],

      //题目正确率
      // tableData: [{
      //   num: 1,
      //   questionTitle: '第一题的问题',
      //   correct: '70%'
      // },{
      //   num: 2,
      //   questionTitle: '第二题的问题',
      //   correct: '80%'
      // }],
      tableData: [],

      //查看详情
      // gridData: [{
      //   options: '第一个选项',
      //   back: '25%'
      // }],
      gridData: [],

      // 考试排名
      // rankData: [{
      //   num: 1,
      //   score: 89,
      //   longtime: '3分3秒'
      // },{
      //   num: 2,
      //   score: 78,
      //   longtime: '3分3秒'
      // }],
      rankData: [],

    }
  },
  computed: {
    getReport(){
      return this.$store.state.reportDate
    }
  },
  watch: {
    getReport(){
      this.scoreData = this.$store.state.reportDate.reportDate.data.scoreData;
      this.tableData = this.$store.state.reportDate.reportDate.data.tableData;
      this.rankData = this.$store.state.reportDate.reportDate.data.rankData;
      this.gridData = this.$store.state.reportDate.reportDate.data.resData;
      // for (let i in this.tableData){
      //   for (let j in this.tableData[i].resData){
      //     let num = this.tableData[i].resData[j].value
      //     this.tableData[i].resData[j].value = num + "%"
      //   }
      // }
    }
  },
  created() {
    localStorage.getItem("testMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("testMsg"))));
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("testMsg",JSON.stringify(this.$store.state))
    })
  },
  methods: {
    // test(){
    //   console.log(this.msg)
    // },
    sendNum(){
      for (let i in this.msg.currentExam){
        if (this.msg.currentExam[i].questiontype === 4){
          this.peoNum += 1
        }
      }
      let totalScore = 0
      for (let i in this.msg.reportDate.data.rankData){
         totalScore += this.msg.reportDate.data.rankData[i].score
      }
      this.areScore = totalScore/this.msg.reportDate.data.rankData.length
    },
    headerClick(row,index) {
      console.log(row)
      console.log(index)
      this.num = index + 1
      this.title = row.questionTitle
      this.correct = row.correct
      this.dialogTableVisible = true
    },

    myEcharts(){
      let myChart = this.$echarts.init(document.getElementById('main'));
      let option = {
        // legend: {},
        // tooltip: {},
        dataset: {
          source: this.$store.state.reportDate.reportDate.data.source
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
          {type: 'bar'}
        ]
      }
      myChart.setOption(option);
    }
  },
  mounted() {
    // this.sendNum()
    setTimeout(() => {
      this.myEcharts()
    },1000)
  }
}
</script>

<style scoped>
.nav{

}
.tag {
  border-left: 3px solid #B3C0D1;
  padding-left: 5px;
  color: #484848;
  font-size: 17px;
}
.box {
  display: flex;
  width: 100%;
  background: #fff;
  margin: 15px 0 18px;
  box-shadow: 0 2px 4px 0 #ecebeb;
  border-radius: 4px;
  padding: 24px 0;
  box-sizing: border-box;
  text-align: center;
}
.box .box_item {
  width: 20%;
  border-right: 1px solid #B3C0D1;
}
.box .box_item .name {
  font-size: 14px;
  color: #AAAAAA;
  margin-bottom: 5px;
}
.box .box_item .date {
  font-size: 17px;
}
.box .box_item span {
  display: block;
}
.dialog>>>.el-dialog__header {
  border-bottom: 1px solid #B3C0D1;
}
.dialog .btns {
  margin-top: 100px;
  border-top: 1px solid #B3C0D1;
  text-align: right;
  padding: 10px;
}


</style>
